<!DOCTYPE html>
<html  lang="zh">
<head>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.2.0" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<title>前端知识体系学习 - Hexo</title>


    <meta name="description" content="1、前端知识体系学习 1.拥有自己的技术博客，或者在一些博客平台上拥有自己的专栏 2.定期的将知识进行总结，不断完善自己的知识体系 3.尽量将自己的知识转换成真实的产出，不要仅仅停留在书面理解层面，更重要的是实际应用 4.坚持输出自己的代码，不要盲目的扎进公司业务  2、学习方法学习方法：如何在工作内外获得持续的技术成长 1、求变之前认清自己 我是谁？我的身份是？未来我想要做什么？当下我可以做什么">
<meta property="og:type" content="article">
<meta property="og:title" content="前端知识体系学习">
<meta property="og:url" content="https://lei929.gitee.io/2020/03/15/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="1、前端知识体系学习 1.拥有自己的技术博客，或者在一些博客平台上拥有自己的专栏 2.定期的将知识进行总结，不断完善自己的知识体系 3.尽量将自己的知识转换成真实的产出，不要仅仅停留在书面理解层面，更重要的是实际应用 4.坚持输出自己的代码，不要盲目的扎进公司业务  2、学习方法学习方法：如何在工作内外获得持续的技术成长 1、求变之前认清自己 我是谁？我的身份是？未来我想要做什么？当下我可以做什么">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://lei929.gitee.io/images/og_image.png">
<meta property="article:published_time" content="2020-03-15T08:27:35.592Z">
<meta property="article:modified_time" content="2020-03-17T00:56:17.099Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://lei929.gitee.io/images/og_image.png">







<link rel="icon" href="/images/favicon.svg">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-light.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/css/back-to-top.css">

    
    
    
    
    
    
    
    <link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    
    


<link rel="stylesheet" href="/css/style.css">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/">
            
                <img src="/images/logo.svg" alt="前端知识体系学习" height="28">
            
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/">主页</a>
                
                <a class="navbar-item"
                href="/archives">归档</a>
                
                <a class="navbar-item"
                href="/categories">分类</a>
                
                <a class="navbar-item"
                href="/tags">标签</a>
                
                <a class="navbar-item"
                href="/about">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                    
                    <a class="navbar-item" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                    
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
	
    
	
    <section class="section">
        <div class="container">
            <div class="columns">			
                <div class="column is-6-tablet is-6-desktop is-9-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-03-15T08:27:35.592Z">2020-03-15</time>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    27 分钟 读完 (大约 4033 个字)
                </span>
                
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                前端知识体系学习
            
        </h1>
        <div class="content">
            <h1 id="1、前端知识体系学习"><a href="#1、前端知识体系学习" class="headerlink" title="1、前端知识体系学习"></a>1、前端知识体系学习</h1><ul>
<li>1.拥有自己的技术博客，或者在一些博客平台上拥有自己的专栏</li>
<li>2.定期的将知识进行总结，不断完善自己的知识体系</li>
<li>3.尽量将自己的知识转换成真实的产出，不要仅仅停留在书面理解层面，更重要的是实际应用</li>
<li>4.坚持输出<code>自己</code>的代码，不要盲目的扎进公司业务</li>
</ul>
<h1 id="2、学习方法"><a href="#2、学习方法" class="headerlink" title="2、学习方法"></a>2、学习方法</h1><p>学习方法：如何在工作内外获得持续的技术成长</p>
<h2 id="1、求变之前认清自己"><a href="#1、求变之前认清自己" class="headerlink" title="1、求变之前认清自己"></a>1、求变之前认清自己</h2><blockquote>
<p>我是谁？我的身份是？未来我想要做什么？当下我可以做什么？我擅长什么？我还需要学会什么？其实有太多的问题可以问，，但我们往往找别人去问？我该学习什么，选框架A还是B,做技术还是管理？等等</p>
<p>答案都取决于我接下来 3 ~ 9 个月具体的行动，这些答案来源于我的原动力以及我规划的最优或者最可执行路径，可一旦我们眼睛看到 9 月后的结果，而忽视这个可执行路径，甚至忽略我的原动力的时候，结果就变得非常惋惜，那就是我竟然整个思考过程，我也就压根无法了解自己的真实诉求和真实能力。</p>
</blockquote>
<h2 id="2、习惯养成与定目标计划"><a href="#2、习惯养成与定目标计划" class="headerlink" title="2、习惯养成与定目标计划"></a>2、习惯养成与定目标计划</h2><blockquote>
<p>我的建议是，在定一个目标时候，比如半年内就要看完 6 个框架源码或者写博客，那么要考虑自己有没有阅读代码和写博客的习惯，如果从来没有，那么这个目标就有点激进，比如对于看代码，有效的做法是，先逼自己用 2 周时间，最多一个月时间，在相对固定的时间段去阅读源码，如果用两三周，发现自己完全坚持不下来，那么这个目标就要修正，如果自己坚持两三周慢慢形成了阅读代码的习惯，并且也从中受益获得一些兴趣和成就感，这时候才是要定目标的时候，因为这时候，你的习惯正在养成。</p>
<p>当你有了一种正在建立中的习惯或者成熟的习惯，也定了具体的目标后，就可以定具体的计划了，计划就是行动指南，要一板一眼的去执行的，坚决不能马虎大意，最好是一条条的写下来，比如：</p>
<ul>
<li>每周晚上 10 点钟，花 20 分钟粗读 React 的生命周期函数源码</li>
<li>每周六花 1 个小时，对本周 5 天的源码阅读及当时的笔记进行整理汇总，绘制函数关系图或者原理图</li>
<li>每周日花 2 个小时，针对本周阅读源码遇到的问题进行深入研究，及本地用代码测试模拟甚至模仿</li>
</ul>
<p>然后再把这个规律性的事项，分解到每一天，每一天都要打一个对勾，任务才算完成，完成了要给你自己一个激励，比如连续 5 天完成，可以奖励自己周末去看场电影，如此这般会有很多像打游戏闯关的奖惩细则，最后叠加进去到每日的手机/电脑/智能手表的行程中，给与自己强力的提醒，我相信如果这样能坚持一个月，也就是将近 100 天，一个习惯大概率就能养成了，就可以定第二个目标去养成第二个习惯了。</p>
<p>所以习惯和目标及计划的关系是，定目标前要尽可能先养成一个潜在的习惯，把自己的底线测试出来，然后调整目标，再拆解目标形成规律性的计划，最后把计划完成跟奖惩关联起来，并通过软硬件来跟自己进行提醒的互动，这注定是一个略显单调的过程，但这一定是一个越坚持越好玩的过程，等我们的习惯训练有了雏形的时候，我们才会真正启动持续成长这件事情。</p>
<p>求人不如求己</p>
</blockquote>
<h2 id="3、训练稳定的思维路径"><a href="#3、训练稳定的思维路径" class="headerlink" title="3、训练稳定的思维路径"></a>3、训练稳定的思维路径</h2><blockquote>
<p>我们前面对自己有了更客观的认知，也培养了完成目标的习惯，这两个前提条件就成立了，还缺第三样东西，就是稳定的思维路径，最刻板也最简单的思维方式就是穷尽式的提问，也就是前面认清自己这里，我用列举问题的这种办法，来让自己不断的接近某一个真相，那么面对任何一个困局的时候，都可以用这种方法。实际上，当你把几十个问题都回答一遍的过程中，你可以继续写下更击中灵魂的问题，而这次问题写下去的时候，往往答案就自然浮出水面。</p>
<p>提问的套路可以更简单一些，就是 What Why How，这个问题是什么，当前的真相是什么，为什么发生，为什么走到这个地步，基于这些原因要如何解决，无论任何事情，都逼自己去捉摸它去思考它的前因后果，慢慢会发现自己会变成一个喜欢上思考和善于思考的人，再也不是之前的那个鲁莽的毛头小子，看问题只看负面看现象只看表面。</p>
<p>认识自己、习惯养成、思维训练这三个要成年累月持续的做，当这些都逐渐变成长在自己身体内的一种能力的时候，所以你面临的问题都不会让你像之前那样焦虑，在做完这么长铺垫后，我们再来看如何获得持续的技术成长。</p>
</blockquote>
<h2 id="4、工作内外的技术成长"><a href="#4、工作内外的技术成长" class="headerlink" title="4、工作内外的技术成长"></a>4、工作内外的技术成长</h2><blockquote>
<p>我必须亮出我的核心观点：成长是经常不符合预期的，请记住，它大概率是不符合预期的，原因是自己的预期本身是非常主观不准确的，同时成长只是过程的积累并不是一个很直观的结果。</p>
<p>基于这样的背景，我们希望达成的共识是，无论成长是否预期，我都希望有持续的成长，同时盼望奇迹的发生 - 就是远超预期的成长会发生在我是身上。</p>
</blockquote>
<h2 id="5、工作内的成长主要来自项目"><a href="#5、工作内的成长主要来自项目" class="headerlink" title="5、工作内的成长主要来自项目"></a>5、工作内的成长主要来自项目</h2><blockquote>
<p>把业务中相关的组件、逻辑等等可以复用的东西抽象出来，这就是一个难题了。你可以通过学习比你厉害的同事的代码，也可以学习这方面业内顶尖的库是如何实现的，这就是在工作中学习及成长。抽离出比较常用的库和组件，了解常用的库实现的原理，比如可以看vue源码，阅读源码去了解，这也是工作中的学习和成长。</p>
<p>实际上大部分工作场景中的项目，对他深度的思考持续的思考都会带来较大的技术成长，但往往我们没有耐心和动力去做这件事情，因为会有雇佣心态。</p>
<p>比如：如果你的团队每次发布都要上服务器动手，除了发布系统外，可不可以有邮件和钉钉提醒，来推送给相关人，那么这个推送功能有没有可能做成一个独立的消息提醒中台系统，任何发布无论前后端都可以接入这个平台，然后在这个平台上配置应用与应用相关人，任何发布都会触发这个消息提醒服务，又贴心又实用，开发这么个系统既有前端也有后端，如果全部是自己动手做，哪怕是在下班后加班做，也岂不乐哉，因为是为工作打造的贴心功能，也大概率不会遇到阻力，同时它还有价值，自己技术也可以有更多的尝试，这样就是双赢的结果。</p>
<p>比如我们现在做的项目财务共享软件，这里面的动态添加菜单就特别好，可以研究下抽离出来，以后用到其他项目中来。</p>
</blockquote>
<h2 id="6、工作外的成长主要来自尝试与思考"><a href="#6、工作外的成长主要来自尝试与思考" class="headerlink" title="6、工作外的成长主要来自尝试与思考"></a>6、工作外的成长主要来自尝试与思考</h2><blockquote>
<p>工作外的成长更简单易操作一些，往往就是技术储备、技术尝鲜和总结思考，技术储备。所有感兴趣的方向都可以去学习储备。另外就是自己的想法，可以把他变成现实，比如一个行程提醒小工具，一个萝莉妹子叫起床小工具，一个自动生成周末食谱的工具等等，任何一个生活痛点和创意想法，都可以动手把它实现出来，前后端可以一起做，技术栈可以激进，所有的这些尝鲜都会带来技术视野的扩张，也会带来技术深度的沉淀.</p>
</blockquote>
<blockquote>
<p>最值得尝试的就是思考和总结，把任何自己学习的框架，看过的书，做过的项目，甚至解决过的 Bug，都可以有序的整理起来，把这些整理变成文字和图表，来强化自己对于技术的记忆，所有的这些记忆重复训练的次数越多，对于他们的理解和运营就越娴熟，往往最慢的反而是最有效的。</p>
</blockquote>
<h2 id="小结："><a href="#小结：" class="headerlink" title="小结："></a>小结：</h2><blockquote>
<p>成长是一个永恒的话题，互联网几十年来，无数的新人问成长，也无数的新人变老人，有的混成一方大拿，有的混成螺丝工头，抛开经济环境、行业趋势和公司经营，更多时候取决于我们成长的是一些学习方法，更根本上依然是我们对于自己的理解、规划和持之以恒的执行，这里面无关运气更关乎实力，不是环境带来的成长去选择你，而是你选择在任何环境中都能成长，具备选择权后，剩下的无非是规划、执行与坚持，无它！</p>
<p>死磕+自律 和修行差不多，实力才是硬道理。将学习变成习惯</p>
</blockquote>
<h1 id="3、技术骨干"><a href="#3、技术骨干" class="headerlink" title="3、技术骨干"></a>3、技术骨干</h1><h2 id="技术骨干身上的几个特征"><a href="#技术骨干身上的几个特征" class="headerlink" title="技术骨干身上的几个特征:"></a><strong>技术骨干身上的几个特征:</strong></h2><p>1、技术底子扎实</p>
<blockquote>
<p>万丈高楼平地起，靠的就是深厚的地基</p>
</blockquote>
<p>2、善于独立解决难题</p>
<p>最终的解决依然是靠他个人</p>
<p>3、不畏惧陌生领域的挑战</p>
<p>4、极少让别人失望</p>
<p>所有技术好的同学都具备这样一个使命必达的执行力</p>
<p>==================================</p>
<h2 id="如何快速成长为技术骨干："><a href="#如何快速成长为技术骨干：" class="headerlink" title="如何快速成长为技术骨干："></a><strong>如何快速成长为技术骨干：</strong></h2><p>1、问清楚任务的 what 和 why</p>
<p> 任务的 what 和 why，需要你跟老板明确对焦，我所缺少的。我们会更了解到自己做这件事情的价值，对于结果也会更有期待，原始的驱动力天然就存在了。</p>
<p>2、 从过程中而不是从结果中学习</p>
<p>有的人非常焦急的需求答案，解决后便丢在脑后，这事非常不可取的学习方式，我就是这样。每一次丢弃都丧失了一次成长的机会。每一次拿到结果后，可以写一篇博客记录，也可以记个笔记，也可以弄张纸 review 一下，也可以讲给别人听，本质上是让自己重新播放刚才解决问题的过程，从中观察是什么样有意无意的动作和思考方式，启发了自己最终找到关键线索和路径，这样的一个思考过程反复锤炼会形成一个解决问题的套路库。</p>
<p>让自己不仅仅对于技术框架或方案的细节更了解，也对于它们宏观上的特征更了解，最终让自己的问题解决能力越来越高效。</p>
<p>3、以开放的视角看待一切技术存在</p>
<p>4、 坚持高强度的学习和持续性的总结</p>
<p>我们距离一个技术骨干就差一个习惯了，这个习惯就是高强度的学习和持续性总结的习惯，为什么学习要高强度，而总结要持续性呢？</p>
<p>学习是为了输入，知识体系变得有力量一定需要足够的输入，而输入从哪里来，做了几年项目就厉害吗，未必，需要内修基本功，通过做业务深入到框架内部学习，学习源码，学习框架设计思想</p>
<p>至于说高强度，是因为低烈度的输入会伴随着遗忘，更会导致整个学习周期过长，更容易看不到质变而感觉枯燥无味甚至弃坑而去，这尤其在新人身上容易发生。如果让我建议一个学习的周期，我觉得 1~2 个月的高强度学习，分成 2 ~ 4 个小阶段是可取的，如果 2 个月没有明显进阶，那么需要推倒重来从 0 开始，而不是续命。</p>
<p>伴随着学习的一定是总结，所有的美食入口到胃，长长的肠道蠕动很久后，营养成分才能被机体充分吸收，最终再合成为新的动力之源要么燃烧要么存储备用，这时候的摄入才转成自己身体的一部分。无论是项目开发还是单纯的学习，都要给自己建立一套 review 机制，通过 review 把自己摄入的零碎的知识点进行重组串联，反反复复的理解消化，并重新输入一套新的知识蓝图把它刻到自己的记忆硬盘中，通过这样的持续性的总结归纳，自己的记忆硬盘会的不断的升级调整，最终对于所有知识的理解会越来越立体。</p>
<p> 目标思维很重要，聚焦价值，多做修正，以始为终，结果导向</p>
<p>比如在学习新技术的时候，可以首先定一个目标，开发一个功能相对完备的小项目，这就比写 hello world 要好很多。在开发中就可以不断学习巩固</p>
<h1 id="4、定每天的任务而不是时间"><a href="#4、定每天的任务而不是时间" class="headerlink" title="4、定每天的任务而不是时间"></a><strong>4、定每天的任务而不是时间</strong></h1><p>把每天的任务完成，而不是每天学习多长时间，坚持敲代码思考总结写博客</p>
<p>这十几年我一共做了三件事：<br>1、不以赚钱为目的选择学习的内容；<br>2、以自己是否能造出轮子来衡量学习的效果；<br>3、坚持每天写自己的代码，前10年每天至少6个小时，不包含学习和工作的时间。</p>

        </div>
        
        
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<div class="notification is-danger">
    You forgot to set the <code>qrcode</code> for Alipay. Please set it in <code>_config.yml</code>.
</div>

                
                
<div class="notification is-danger">
    You forgot to set the <code>qrcode</code> for Wechat. Please set it in <code>_config.yml</code>.
</div>

                
                <!-- Visit https://www.paypal.com/donate/buttons/ to get your donate button -->

<div class="notification is-danger">
    You forgot to set the <code>business</code> and <code>currency_code</code> for Paypal. Please set it in <code>_config.yml</code>.
</div>

                
                
<div class="notification is-danger">
    You forgot to set the <code>url</code> Patreon. Please set it in <code>_config.yml</code>.
</div>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/2020/03/17/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">学习方法</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/2020/03/15/hero%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">
                <span class="level-item">hero学习笔记</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>


</div>
                

 





<div class="column is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
    
        
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="" src="/images/avatar.png" alt="海澈">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        海澈
                    </p>
                    
                    
                    <p class="is-size-6 is-block">
                        格物致知诚意正心修身
                    </p>
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>北京</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/archives">
                        <p class="title has-text-weight-normal">
                            7
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/categories">
                        <p class="title has-text-weight-normal">
                            0
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/tags">
                        <p class="title has-text-weight-normal">
                            0
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/ppoffice" target="_blank" rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="Github" href="https://github.com/ppoffice">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="Facebook" href="https://facebook.com">
                
                <i class="fab fa-facebook"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="Twitter" href="https://twitter.com">
                
                <i class="fab fa-twitter"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="Dribbble" href="https://dribbble.com">
                
                <i class="fab fa-dribbble"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener"
                title="RSS" href="/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
    
        

    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#1、前端知识体系学习">
        <span class="has-mr-6">1</span>
        <span>1、前端知识体系学习</span>
        </a></li><li>
        <a class="is-flex" href="#2、学习方法">
        <span class="has-mr-6">2</span>
        <span>2、学习方法</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1、求变之前认清自己">
        <span class="has-mr-6">2.1</span>
        <span>1、求变之前认清自己</span>
        </a></li><li>
        <a class="is-flex" href="#2、习惯养成与定目标计划">
        <span class="has-mr-6">2.2</span>
        <span>2、习惯养成与定目标计划</span>
        </a></li><li>
        <a class="is-flex" href="#3、训练稳定的思维路径">
        <span class="has-mr-6">2.3</span>
        <span>3、训练稳定的思维路径</span>
        </a></li><li>
        <a class="is-flex" href="#4、工作内外的技术成长">
        <span class="has-mr-6">2.4</span>
        <span>4、工作内外的技术成长</span>
        </a></li><li>
        <a class="is-flex" href="#5、工作内的成长主要来自项目">
        <span class="has-mr-6">2.5</span>
        <span>5、工作内的成长主要来自项目</span>
        </a></li><li>
        <a class="is-flex" href="#6、工作外的成长主要来自尝试与思考">
        <span class="has-mr-6">2.6</span>
        <span>6、工作外的成长主要来自尝试与思考</span>
        </a></li><li>
        <a class="is-flex" href="#小结：">
        <span class="has-mr-6">2.7</span>
        <span>小结：</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#3、技术骨干">
        <span class="has-mr-6">3</span>
        <span>3、技术骨干</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#技术骨干身上的几个特征">
        <span class="has-mr-6">3.1</span>
        <span>技术骨干身上的几个特征:</span>
        </a></li><li>
        <a class="is-flex" href="#如何快速成长为技术骨干：">
        <span class="has-mr-6">3.2</span>
        <span>如何快速成长为技术骨干：</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4、定每天的任务而不是时间">
        <span class="has-mr-6">4</span>
        <span>4、定每天的任务而不是时间</span>
        </a></li></ul>
            </div>
        </div>
    </div>

    
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            链接
        </h3>
        <ul class="menu-list">
        
            <li>
                <a class="level is-mobile" href="https://hexo.io" target="_blank" rel="noopener">
                    <span class="level-left">
                        <span class="level-item">Hexo</span>
                    </span>
                    <span class="level-right">
                        <span class="level-item tag">hexo.io</span>
                    </span>
                </a>
            </li>
        
            <li>
                <a class="level is-mobile" href="https://github.com/ppoffice" target="_blank" rel="noopener">
                    <span class="level-left">
                        <span class="level-item">PPOffice</span>
                    </span>
                    <span class="level-right">
                        <span class="level-item tag">github.com</span>
                    </span>
                </a>
            </li>
        
        </ul>
        </div>
    </div>
</div>

    
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            
            </ul>
        </div>
    </div>
</div>
    
        
    
    
        <div class="column-right-shadow is-hidden-widescreen ">
        
            <div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/2020/03/21/node%E7%AC%94%E8%AE%B0/" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="/images/thumbnail.svg" alt="node笔记">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-21T12:54:44.958Z">2020-03-21</time></div>
                    <a href="/2020/03/21/node%E7%AC%94%E8%AE%B0/" class="title has-link-black-ter is-size-6 has-text-weight-normal">node笔记</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/2020/03/19/promise%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0/" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="/images/thumbnail.svg" alt="promise基础学习">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-19T02:31:00.849Z">2020-03-19</time></div>
                    <a href="/2020/03/19/promise%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0/" class="title has-link-black-ter is-size-6 has-text-weight-normal">promise基础学习</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/2020/03/17/MD%E8%AF%AD%E6%B3%95%E5%81%8F%E5%A5%BD/" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="/images/thumbnail.svg" alt="MD语法偏好">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-17T01:26:59.641Z">2020-03-17</time></div>
                    <a href="/2020/03/17/MD%E8%AF%AD%E6%B3%95%E5%81%8F%E5%A5%BD/" class="title has-link-black-ter is-size-6 has-text-weight-normal">MD语法偏好</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/2020/03/17/vscode%E8%AE%B0%E5%BD%95/" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="/images/thumbnail.svg" alt="vscode记录">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-17T01:12:12.286Z">2020-03-17</time></div>
                    <a href="/2020/03/17/vscode%E8%AE%B0%E5%BD%95/" class="title has-link-black-ter is-size-6 has-text-weight-normal">vscode记录</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/2020/03/17/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="/images/thumbnail.svg" alt="学习方法">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-03-17T01:08:16.872Z">2020-03-17</time></div>
                    <a href="/2020/03/17/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/" class="title has-link-black-ter is-size-6 has-text-weight-normal">学习方法</a>
                    <p class="is-size-7 is-uppercase">
                        
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
            <div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">7</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
            <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
            </div>
        </div>
    </div>
</div>
        
        </div>
    
</div>

                


            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <a class="footer-logo is-block has-mb-6" href="/">
                
                    <img src="/images/logo.svg" alt="前端知识体系学习" height="28">
                
                </a>
                <p class="is-size-7">
                &copy; 2020 John Doe&nbsp;
                Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                
                </p>
            </div>
            <div class="level-end">
            
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" rel="noopener" title="Creative Commons" href="https://creativecommons.org/">
                        
                        <i class="fab fa-creative-commons"></i>
                        
                    </a>
                </p>
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" rel="noopener" title="Attribution 4.0 International" href="https://creativecommons.org/licenses/by/4.0/">
                        
                        <i class="fab fa-creative-commons-by"></i>
                        
                    </a>
                </p>
                
                <p class="control">
                    <a class="button is-white is-large" target="_blank" rel="noopener" title="Download on GitHub" href="https://github.com/ppoffice/hexo-theme-icarus">
                        
                        <i class="fab fa-github"></i>
                        
                    </a>
                </p>
                
                </div>
            
            </div>
        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://lei929.gitee.io',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>


<script src="https://cdn.jsdelivr.net/npm/mathjax@2.7.5/unpacked/MathJax.js?config=TeX-MML-AM_CHTML" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    MathJax.Hub.Config({
        'HTML-CSS': {
            matchFontHeight: false
        },
        SVG: {
            matchFontHeight: false
        },
        CommonHTML: {
            matchFontHeight: false
        },
        tex2jax: {
            inlineMath: [
                ['$','$'],
                ['\\(','\\)']
            ]
        }
    });
});
</script>


<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/js/back-to-top.js" defer></script>














<script src="/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/js/insight.js" defer></script>
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" href="/css/insight.css">
    
</body>
</html>